<template>
    <div class="echarts-wrap" ref="echartWord"></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount  } from 'vue';
import * as echarts from 'echarts';
import 'echarts-wordcloud';

const chartEl = ref(null);
let chartInstance = null;

const props = defineProps({
    data: { type: Array, required: true },
    sharp: { type: String, default: 'triangle' }
});

const echartWord = ref(null);
let myChart = null;

const initChart = () => {
    if (echartWord.value) {
        myChart = echarts.init(echartWord.value);
        const option = {
            series: [{
                type: 'wordCloud',
                shape: props.shape,
                gridSize: 2,
                sizeRange: [12, 60],
                rotationRange: [-90, 90],
                rotationStep: 45,
                // 字体
                textStyle: {
                    normal: {
                        color: function () {
                            return 'rgb(' + [
                                Math.round(Math.random() * 160),
                                Math.round(Math.random() * 160),
                                Math.round(Math.random() * 160)
                            ].join(',') + ')';
                        }
                    },
                    emphasis: {
                        shadowBlur: 10,
                        shadowColor: '#333'
                    }
                },
                // 设置词云数据
                data: props.data
            }]
        };
        myChart.setOption(option);
        window.addEventListener('resize', myChart.resize);
    }
};

onMounted(() => {
    initChart();
});

onBeforeUnmount(() => {
    if (myChart) {
        window.removeEventListener('resize', myChart.resize);
        myChart.dispose();
    }
});
</script>

<style lang="scss" scoped>
.echarts-wrap {
    width: 100%;
    height: 75%;
}
</style>